{% extends "base.html" %}{% load static %}
{% block title %}首页{% endblock %}
{% block style %}
<style>
    html, body {
        background: linear-gradient(135deg, #1a1a1a, #2a2a2a) !important;
        min-height: 100vh;
    }

    #wrapper {
        background: linear-gradient(135deg, #1a1a1a, #2a2a2a) !important;
        margin: 0 !important;
        padding: 0 !important;
        min-height: calc(100vh - 116px) !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #push {
        display: none !important;
    }

    .index-container {
        width: 100%;
        max-width: 1000px;
        background: rgba(26, 26, 26, 0.8);
        border-radius: 15px;
        padding: 3rem;
        box-shadow: 0 0 30px rgba(0, 123, 255, 0.3);
        backdrop-filter: blur(10px);
        margin: 2rem auto;
    }

    .neon-text {
        color: #00bfff;
        text-shadow: 0 0 10px rgba(0, 191, 255, 0.5);
        font-size: 2rem;
        letter-spacing: 2px;
        margin-bottom: 3rem;
        text-align: center;
    }

    .button-group {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 2rem;
    }

    .custom-btn {
        padding: 1rem 2rem;
        font-size: 1.1rem;
        letter-spacing: 1px;
        border: none;
        border-radius: 8px;
        color: white;
        transition: all 0.3s ease;
        min-width: 280px;
        text-align: center;
        text-decoration: none;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
    }

    .custom-btn::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(
            120deg,
            transparent,
            rgba(255, 255, 255, 0.2),
            transparent
        );
        transition: 0.5s;
    }

    .custom-btn:hover::before {
        left: 100%;
    }

    .custom-btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        color: white;
        text-decoration: none;
    }

    .btn-chart1 {
        background: linear-gradient(45deg, #007bff, #00bfff);
    }

    .btn-chart2 {
        background: linear-gradient(45deg, #28a745, #20c997);
    }

    .btn-recommend {
        background: linear-gradient(45deg, #17a2b8, #4dc0b5);
    }

    .btn-show {
        background: linear-gradient(45deg, #ffc107, #ff9800);
    }

    .bg-dark {
        background: linear-gradient(135deg, #1a1a1a, #2a2a2a) !important;
    }
</style>
{% endblock %}

{% block content %}
<div class="container">
    <div class="index-container">
        <h2 class="neon-text">图书分析系统</h2>
        <div class="button-group">
            <a href="{% url 'system:chart1' %}" class="custom-btn btn-chart1">
                不同类别下价格区间数量占比
            </a>
            <a href="{% url 'system:chart2' %}" class="custom-btn btn-chart2">
                不同类别下出版社发行量Top5
            </a>
            <a href="{% url 'system:recommend' %}" class="custom-btn btn-recommend">
                图书推荐
            </a>
            <a href="{% url 'system:show' %}" class="custom-btn btn-show">
                大屏展示
            </a>
        </div>
    </div>
</div>
{% endblock %}